<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/style.css"/>
    <link href="assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/ace.min.css" />
    <link rel="stylesheet" href="font/css/font-awesome.min.css" />
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
    <![endif]-->
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="Widget/Validform/5.3.2/Validform.min.js"></script>
    <script src="assets/js/typeahead-bs2.min.js"></script>
    <script src="assets/js/jquery.dataTables.min.js"></script>
    <script src="assets/js/jquery.dataTables.bootstrap.js"></script>
    <script src="assets/layer/layer.js" type="text/javascript" ></script>
    <script src="js/lrtk.js" type="text/javascript" ></script>
    <script src="assets/layer/layer.js" type="text/javascript"></script>
    <script src="assets/laydate/laydate.js" type="text/javascript"></script>
    <title>用户</title>
</head>

<body>
<div class="page-content clearfix">
    <div class="user">
        <div class="d_Confirm_Order_style">
            <!--将绑定日期控件的输入框删除了  id=start-->
            <!--操作-->
            <div class="border clearfix">
       <span class="l_f">
        <a href="javascript:ovid()" id="user_add" class="btn btn-warning"><i class="fa fa-plus"></i> 添加用户</a>
        <a href="javascript:ovid()" class="btn btn-danger"><i class="fa fa-trash"></i> 批量删除</a>
       </span>
                <span class="r_f">${tips}</span>
            </div>

            <div class="clearfix user_style" id="user">
                <div class="table_menu_list"  id="testIframe">
                    <table class="table table-striped table-bordered table-hover" id="sample_table">
                        <thead>
                        <tr>
                            <th width="25px"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
                            <th width="80px">编号</th>
                            <th width="100px">用户名</th>
                            <th width="80px">积分</th>
                            <th width="150px">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${userList}" var="user">
                            <tr>
                                <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
                                <td>${user.userId}</td>
                                <td>${user.userName}</td>
                                <td>${user.score}</td>

                                <td class="td-user">
                                    <a title="编辑" onclick="user_edit(${user.userId})" href="javascript:;"  class="btn btn-xs btn-info" >
                                        <i class="fa fa-edit bigger-120"></i>
                                    </a>
                                    <a title="删除" href="javascript:;"  onclick="user_del(this,${user.userId})" class="btn btn-xs btn-warning" >
                                        <i class="fa fa-trash  bigger-120"></i>
                                    </a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
    <!--添加用户-->
    <div id="add_user_style" class="add_user" style="display:none">
        <form action="UserAddServlet" method="post" id="form-user-add">

            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>编号：</label>
                <div class="formControls">
                    <input type="text" class="input-text" name="userId" datatype="*8-8" nullmsg="编号不能为空">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>

            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>用户名：</label>
                <div class="formControls">
                    <input type="text" class="input-text" value="" placeholder="" id="login-name" name="userName" datatype="*2-16" nullmsg="用户名不能为空">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>

            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>初始密码：</label>
                <div class="formControls">
                    <input type="password" placeholder="密码" name="pwd" autocomplete="off" class="input-text" datatype="*6-20" nullmsg="密码不能为空">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>

            <div class="form-group">
                <label class="form-label "><span class="c-red">*</span>确认密码：</label>
                <div class="formControls ">
                    <input type="password" placeholder="确认新密码" autocomplete="off" class="input-text Validform_error" errormsg="您两次输入的新密码不一致！" datatype="*" nullmsg="请再输入一次新密码！" recheck="pwd" id="pwd2" name="pwd2">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>

            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>积分：</label>
                <div class="formControls">
                    <input type="text" class="input-text" name="score" datatype="*2-10" nullmsg="积分不能为空">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>


            <div>
            <input class="btn btn-primary radius" type="submit" id="Add_User" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </form>
    </div>

    <!--修改用户-->
    <div id="update_user_style" class="add_user" style="display:none;padding: 20px 10px">
        <form action="UserUpdataServlet" method="post" id="form-user-update">
            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>编号：</label>
                <div class="formControls">
                    <%-- ID是不允许修改的  --%>
                    <input type="text" class="input-text"  name="userId" id="userId" value="readonly" readonly>
                    <!--<input type="text" class="input-text userId" disabled>
                    <input type="hidden" name="userId" class="userId">-->
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>

            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>登录名：</label>
                <div class="formControls">
                    <input type="text" class="input-text"  name="userName" id="userName">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>

           <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>初始密码：</label>
                <div class="formControls">
                    <input type="password" placeholder="无需修改不输入" name="loginPwd" class="input-text">
                </div>
                <div class="col-4"> <span class="Validform_checktip">如果密码无需修改则置空</span></div>
            </div>

            <div class="form-group">
                <label class="form-label "><span class="c-red">*</span>新密码：</label>
                <div class="formControls ">
                    <input type="password" placeholder="确认新密码"  class="input-text Validform_error" name="loginPwd2">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>

            <div class="form-group">
                <label class="form-label "><span class="c-red">*</span>确认新密码：</label>
                <div class="formControls ">
                    <input type="password" placeholder="确认新密码" autocomplete="off" class="input-text Validform_error" errormsg="您两次输入的新密码不一致！" datatype="*" nullmsg="请再输入一次新密码！" recheck="loginPwd2" id="loginPwd3" name="loginPwd3">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>

            <div class="form-group">
                <label class="form-label"><span class="c-red">*</span>积分：</label>
                <div class="formControls">
                    <input type="text" class="input-text" name="score" id="score">
                </div>
                <div class="col-4"> <span class="Validform_checktip"></span></div>
            </div>

            <div>
                <input class="btn btn-primary radius" type="submit" id="update_User" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </form>
    </div>

</div>
</body>
</html>

<script type="text/javascript">
    jQuery(function($) {
        var oTable1 = $('#sample_table').dataTable( {
            "aaSorting": [[ 1, "desc" ]],//默认第几个排序
            "bStateSave": true,//状态保存
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable":false,"aTargets":[0,2,3,4,5,7,8,9]}// 制定列不参与排序
            ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function(){
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
            return 'left';
        }
    });

</script>
<script type="text/javascript">
    $(function() {
        $("#user").fix({
            float : 'left',
            //minStatue : true,
            skin : 'green',
            durationTime :false,
            spacingw:50,//设置隐藏时的距离
            spacingh:270,//设置显示时间距
        });
    });
    //字数限制
    function checkLength(which) {
        var maxChars = 100; //
        if(which.value.length > maxChars){
            layer.open({
                icon:2,
                title:'提示框',
                content:'您输入的字数超过限制!',
            });
            // 超过限制的字数了就将 文本框中的内容按规定的字数 截取
            which.value = which.value.substring(0,maxChars);
            return false;
        }else{
            var curr = maxChars - which.value.length; //250 减去 当前输入的
            document.getElementById("sy").innerHTML = curr.toString();
            return true;
        }
    };
    //初始化宽度、高度
    $(".widget-box").height($(window).height()-215);
    $(".table_menu_list").width($(window).width()-260);
    $(".table_menu_list").height($(window).height()-215);
    //当文档窗口发生改变时 触发
    $(window).resize(function(){
        $(".widget-box").height($(window).height()-215);
        $(".table_menu_list").width($(window).width()-260);
        $(".table_menu_list").height($(window).height()-215);
    })


    /*用户-停用*/
    function user_stop(obj,id){
        layer.confirm('确认要停用吗？',function(index){
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="fa fa-close bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
            $(obj).remove();
            layer.msg('已停用!',{icon: 5,time:1000});
        });
    }
    /*用户-启用*/
    function user_start(obj,id){
        layer.confirm('确认要启用吗？',function(index){
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="fa fa-check  bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
            $(obj).remove();
            layer.msg('已启用!',{icon: 6,time:1000});
        });
    }

    /*用户-编辑*/
    function user_edit(id){

        //查询当前管理员的原始信息，并显示在id = update_administrator_style 的div的输入框中
        $.post("UserQueryServlet",{userId:id},function(res){

            //res就是查询到的管理员信息
            $("#userId").val(res.userId);
            $("#userName").val(res.userName);
            $("#score").val(res.score);

        },"json");

        //id 就是要修改的管理员的ID
        layer.open({
            type: 1,
            title:'修改用户',
            area: ['700px',''],
            shadeClose: false,
            content: $('#update_user_style')
        });
    }

    /*用户-删除*/
    function user_del(obj,id){

        //弹窗确认是否要删除
        layer.confirm('确认要删除吗？',function(index){
            //a. 发送ajax请求到UserDeleteServlet，同时将id传过去
            $.post("UserDeleteServlet",{userId:id},function(res){

                //b. res就是返回的删除结果，根据不同的返回结果进行不同的提示
                if(res.code == 1000){
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!',{icon:1,time:1000});
                }else if(res.code == 1001){
                    layer.msg('删除失败!',{icon:1,time:1000});
                }
            },"json");
        });
    }

    /*添加管理员*/
    $('#user_add').on('click', function(){
        layer.open({
            type: 1,
            title:'添加用户',
            area: ['700px',''],
            shadeClose: false,
            content: $('#add_user_style'),
        });
    });

    //表单验证提交
    $("#form-user-add").Validform({
        tiptype:2,
        callback:function(data){
            //form[0].submit();
            if(data.status==1){
                layer.msg(data.info, {icon: data.status,time: 1000}, function(){
                    location.reload();//刷新页面
                });
            }
            else{
                layer.msg(data.info, {icon: data.status,time: 3000});
            }
            var index =parent.$("#iframe").attr("src");
            parent.layer.close(index);
            //
        }
    });
</script>

